<script setup>
import { ref } from "vue";
import router from "../modules/router.js";
const list = ref([
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
  {
    img: "",
    title: "小红书运营",
    describe:
      "21 天内，完成账号搭建，并开始 持续创作小红书笔记，发布不少于 3条笔记",
  },
]);
const onClickLeft = () => {
  router.push("/");
};
const toActivity = () => {
  router.push("/activity");
};
</script>

<template>
  <van-nav-bar
    title="2023年5月实战活动"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="box" v-for="(item, index) in list" :key="index">
    <div style="width: 100px; height: 100px">
      <van-image
        width="100"
        height="100"
        radius="5px"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div style="width: 100%; padding: 0 5px">
      <div class="boxTitle">{{ item.title }}</div>
      <div class="boxContent">
        {{ item.describe }}
      </div>
    </div>
    <van-button
      type="primary"
      size="small"
      style="width: 120px"
      @click="toActivity"
      >进入活动</van-button
    >
  </div>
</template>

<style scoped>
.boxContent {
  font-size: 14px;
}
.boxTitle {
  font-size: 20px;
  font-weight: 600;
}
.box {
  padding: 10px;
  display: flex;
  border-bottom: 1px solid #cfcfcf;
  align-items: center;
}
</style>